<!--
 * @Author: zds
 * @Date: 2022-10-21 11:14:28
 * @LastEditors: zds
 * @LastEditTime: 2022-11-02 20:17:53
 * @Description: file content
 * @FilePath: \qjt-app\src\modules\business\construction\sandTable\index.vue
-->
<template>
    <f7-page>
        <f7-navbar>
            <f7-nav-left>
            </f7-nav-left>
            <f7-nav-title>项目沙盘</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>
        <div class="search-bar">
            <div class="search-left"
                 :class="{'full': !projectAllPer}">
                <f7-list inset>
                    <f7-list-input :value="searchContent"
                                   @input="searchContent = $event.target.value"
                                   type="text"
                                   placeholder="请输入项目名称"
                                   clear-button>
                    </f7-list-input>
                </f7-list>
                <div @click="sheetOpen">
                    <f7-icon slot="media"
                             f7="search"></f7-icon>
                </div>
            </div>
            <div class="pill-btn"
                 v-if="projectAllPer">
                <span :class="{'active': statisticsType == 0}"
                      @click="myProject">我的</span>
                <span :class="{'active': statisticsType != 0}"
                      @click="allProject">所有</span>
            </div>
            <!-- <f7-button v-if="statisticsType != 0"
                       @click="myProject"
                       raised
                       fill>我的项目</f7-button>
            <f7-button v-else
                       @click="allProject"
                       raised
                       fill>所有项目</f7-button> -->
        </div>
        <div class="nav-left">
            <div class="left-item">
                <div>在建项目</div>
                <div><span class="number blue margin-r-5">{{buildingCount}}</span>项</div>
            </div>
            <div class="left-item">
                <div>危大工程</div>
                <div><span class="number red margin-r-5">{{riskCount}}</span>项</div>
            </div>
            <div class="left-item">
                <div>视频接入</div>
                <div><span class="number blue">{{onlineVideoCount}}</span><span class="number gray">/{{totalVideoCount}}</span></div>
            </div>
        </div>
        <!--  -->
        <tdt-map :center="center"
                 :zoom="zoom"
                 class="bm-view"
                 @zoomend="handleMapZoomEnd">
            <tdt-polygon :path="dongxihuquMap"
                         lineStyle="dashed"
                         fillColor="rgb(146, 214, 255)"
                         color="rgb(61, 167, 255)"></tdt-polygon>
            <tdt-marker v-for="(marker,index) in points"
                        :key="index"
                        :position="[marker.lngBd,marker.latBd]"
                        :icon="tdicon"
                        @click="openInfowindow(marker)"></tdt-marker>
            <tdt-infowindow :closeOnClick="true"
                            :target="infowindow.target"
                            :content="infowindow.content"
                            @close="infowindow.target= null "
                            :offset="[10, 0]">
            </tdt-infowindow>
        </tdt-map>
        <!--  -->
        <f7-sheet :opened="sheetOpened"
                  @sheet:closed="sheetOpened = false"
                  backdrop-el="关闭"
                  push>
            <f7-toolbar>
                <div class="left"></div>
                <div class="right">
                    <f7-link sheet-close>关闭</f7-link>
                </div>
            </f7-toolbar>
            <f7-page-content>
                <f7-list v-if="searchEng.length > 0">
                    <f7-list-item v-for="(item, index) in searchEng"
                                  :key="index"
                                  @click="jumpTo(item)"
                                  link="#">{{item.engineeName}}</f7-list-item>
                </f7-list>
                <div class="no-data"
                     v-else>查询无类似数据</div>
            </f7-page-content>
        </f7-sheet>
        <v-navber-construction slot="fixed"></v-navber-construction>

        <!-- 项目信息的弹出 -->
        <v-info v-model="show"
                :model="infoModel"></v-info>
        <!-- 项目信息的弹出 end -->
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

import dongxihuqu from "./region/dongxihuqu.json"
import vInfo from './components/info.vue'
export default class instance extends controller {
    disableCache () {
        return true;
    }
    mixin () {
        return {
            components: {
                vInfo
            },
            data () {
                return {
                    // 项目信息是否弹出
                    show: false,
                    // 项目信息数据
                    infoModel: {},
                    //search-bar
                    statisticsType: 0,
                    searchContent: '',
                    //nav-left
                    buildingCount: 0,
                    onlineVideoCount: 0,
                    riskCount: 0,
                    totalVideoCount: 0,
                    //baidu-map
                    map: '',
                    center: [114.07435, 30.70676],
                    zoom: 10,
                    tdicon: require("@/assets/img/map_icon.png"),
                    visible: true,
                    plyList: [],
                    gz_area: [
                        // { name: '青山区', latlng: { lng: 114.39117, lat: 30.63427 }, total: 0, areaCode: '' }, //1
                        { name: '东西湖区', latlng: { lng: 114.13708, lat: 30.61989 }, total: 0, areaCode: '' }, //1
                        // { name: '江汉区', latlng: { lng: 114.27093, lat: 30.60146 }, total: 0, areaCode: '' }, //1
                        // { name: '江岸区', latlng: { lng: 114.30943, lat: 30.59982 }, total: 0, areaCode: '' }, //1
                        // { name: '武昌区', latlng: { lng: 114.31589, lat: 30.55389 }, total: 0, areaCode: '' }, //1
                        // { name: '江夏区', latlng: { lng: 114.31301, lat: 30.34653 }, total: 0, areaCode: '' }, //1
                        // { name: '硚口区', latlng: { lng: 114.26422, lat: 30.56945 }, total: 0, areaCode: '' },
                        // { name: '汉阳区', latlng: { lng: 114.27478, lat: 30.54915 }, total: 0, areaCode: '' }, //1
                        // { name: '新洲区', latlng: { lng: 114.80136, lat: 30.84145 }, total: 0, areaCode: '' }, //1
                        // { name: '蔡甸区', latlng: { lng: 114.02929, lat: 30.58197 }, total: 0, areaCode: '' }, //1
                        // { name: '洪山区', latlng: { lng: 114.34375, lat: 30.49989 }, total: 0, areaCode: '' }, //1
                        // { name: '汉南区', latlng: { lng: 114.08462, lat: 30.30879 }, total: 0, areaCode: '' }, //1
                        // { name: '黄陂区', latlng: { lng: 114.37512, lat: 30.88151 }, total: 0, areaCode: '' }, //1
                    ],
                    showMaker: true,
                    points: [],
                    currentClickMarker: {},
                    markerWindowShow: false,
                    dongxihuquMap: dongxihuqu.features[0].geometry.coordinates[0][0],
                    //mapv
                    mapvLayer: '',
                    mapv: '',
                    dataSet: '',
                    pointImg: '',
                    //f7-sheet
                    sheetOpened: false,
                    searchEng: [],
                    // Tianditu
                    infowindow: {},
                }
            },
            created () {
                this.init()
            },
            computed: {
                // 所有的权限
                projectAllPer () {
                    return (this.$framework.account.hasPermission('project:index:my') && this.$framework.account.hasPermission('project:index:all'))
                }
            },
            methods: {
                init () {
                    this.$f7.preloader.show();
                    this.$util.getPromise('/statistics/map/getProjectModel', { statisticsType: this.statisticsType }).then(result => {
                        this.buildingCount = result.parameters.buildingCount
                        this.onlineVideoCount = result.parameters.onlineVideoCount
                        this.riskCount = result.parameters.riskCount
                        this.totalVideoCount = result.parameters.totalVideoCount
                        if (result.parameters.areas && result.parameters.areas.length && result.parameters.areas.length) {
                            let promiserArr = []
                            result.parameters.areas.forEach(element => {
                                let area = this.gz_area.findIndex(item => item.name == element.areaName)
                                if (area != -1) {
                                    this.content = [element.lngBd, element.latBd]
                                    this.gz_area[area].total = element.engineeCount
                                    this.gz_area[area].areaCode = element.areaCode
                                }
                                promiserArr.push(this.$util.getPromise('/statistics/map/getProjectAreaModel', { statisticsType: this.statisticsType, areaCode: element.areaCode }))
                            });
                            this.points = []
                            Promise.all(promiserArr).then(results => {
                                results.forEach(res => {
                                    this.points.push(...res.parameters.enginees)
                                })
                                this.drawPoint()
                            })
                            console.log(this.points)
                        }
                        this.$f7.preloader.hide();
                    }).catch((err) => {
                        this.$f7.preloader.hide();
                        this.$f7.dialog.toast('接口出错！')
                    })
                },
                myProject () {
                    this.statisticsType = 0
                    this.points = []
                    this.init()
                },
                allProject () {
                    this.statisticsType = 1
                    this.points = []
                    this.init()
                },
                sheetOpen () {
                    if (!this.searchContent) {
                        this.$f7.dialog.toast('请输入项目名称')
                    } else {
                        this.$f7.preloader.show();
                        this.searchEng = []
                        this.points.forEach(item => {
                            if (item.engineeName.includes(this.searchContent)) {
                                this.searchEng.push(item)
                            }
                        })
                        this.$f7.preloader.hide();

                        if (this.searchEng.length == 1) {
                            this.jumpTo(this.searchEng[0])
                        } else {
                            this.sheetOpened = true
                        }
                    }
                },
                jumpTo (item) {
                    this.center = [item.lngBd, item.latBd]
                    this.openInfowindow(item)
                    this.zoom = 11
                    // let point_center = new BMap.Point(item.lngBd, item.latBd)
                    // this.map.setZoom(11);
                    // this.map.setCenter(point_center);
                    this.sheetOpened = false
                    this.markerWindowShow = true
                },
                handleMarkerClick (marker) {

                    this.markerWindowShow = true
                },
                handler ({ BMap, map }) {
                    map.enableScrollWheelZoom(true);
                    this.map = map;
                    this.plyList = [];
                    for (let area of this.gz_area) {
                        this.setAreaMask(area);
                    }
                    this.mapv = require("mapv")
                    this.pointImg = document.createElement("img")
                    this.pointImg.src = require("@/assets/img/map_icon.png")
                },
                drawPoint () {
                    let arr = []
                    this.points.forEach(element => {
                        arr.push({
                            geometry: {
                                type: "Point",
                                coordinates: [element.lngBd, element.latBd],
                            },
                            icon: this.pointImg,
                            data: element
                        })
                    });

                    let options = {
                        draw: 'icon',
                        size: 20,
                        methods: { // 一些事件回调函数
                            click: (item) => { // 点击事件，返回对应点击元素的对象值
                                if (item) {
                                    this.handleMarkerClick(item.data)
                                }

                            },
                        },
                    }
                    if (this.dataSet) {
                        this.dataSet.set(arr)
                    } else {
                        this.handleMarkerClick(arr.data);
                        // this.dataSet = new this.mapv.DataSet(arr);
                        // this.mapvLayer = new this.mapv.baiduMapLayer(this.map, this.dataSet, options);
                    }
                },
                // 地图绘制行政区域
                setAreaMask (area) {
                    let boundary = new BMap.Boundary();
                    boundary.get(`武汉市${area.name}`, (res) => {
                        //轮廓的总数 —— 有的区由多个封闭区域组成
                        let count = res.boundaries.length;
                        if (!count) {
                            console.log('未能获取到当前输入的行政区域');
                            return;
                        }
                        for (let i = 0; i < 1; i++) {
                            //创建多边形覆盖物
                            let ply = new BMap.Polygon(res.boundaries[i],
                                {
                                    strokeWeight: 2,
                                    strokeColor: "rgb(61, 167, 255)",
                                    fillOpacity: 0.2,
                                    fillColor: 'rgb(146, 214, 255)',
                                    strokeStyle: "dashed",
                                }
                            );
                            // ply.addEventListener('click', this.handleMapPolygonClick(area, ply))
                            //添加覆盖物
                            this.map.addOverlay(ply);
                            // 缓存覆盖层
                            this.plyList.push({ polygon: ply, areaName: area.name })
                        }
                    })
                },
                // 地图缩放事件结束触发
                handleMapZoomEnd (type, target) {

                },
                draw ({ el }, marker) {
                    if (this.map) {
                        const pixel = this.map.pointToOverlayPixel(new BMap.Point(marker.latlng.lng, marker.latlng.lat))
                        el.style.left = pixel.x + 'px'
                        el.style.top = pixel.y + 'px'
                    }
                },
                openInfowindow (marker) {
                    // 关闭搜索的弹出
                    this.sheetOpened = false

                    this.infoModel = marker
                    this.show = true
                    return
                    this.infowindow = {
                        target: [marker.lngBd, marker.latBd],
                        content:
                            `
                              <div style="text-align:center;">
                                <span style="font-size:15px">${marker.engineeName}</span>
                                          <br/>
                              <a class="link" href="/business/construction/enginee/supervise?engineeId=${marker.engineeId}">
                              <van-button class="van-button van-button--info van-button--normal" style="width:200px;line-height: 28px;margin-top: 15px;height:32px">
                                项目详情
                                </van-button>
                              </a>
                                <div/>
                              `
                    };
                },
            }
        }
    }
}
</script>

<style lang="less" scoped>
@deep: ~">>>";

@{deep}.sheet-modal-inner {
    .page-content {
        padding-top: 0;
        .list {
            margin: 0;
        }
    }
}
@{deep} .search-bar {
    display: flex;
    align-items: center;
    margin: 15px 10px;
    position: relative;
    z-index: 2;
    .search-left {
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 50px;
        padding: 0 10px;
        margin-right: 10px;

        &.full {
            flex: 1;
        }
    }
    .list.inset {
        margin: 0;
        flex: 1;
    }
    ul {
        flex: 1;
        .item-inner {
            padding-top: 3px;
            padding-bottom: 3px;
            flex-direction: row;
            align-items: center;
            .input-clear-button::before {
                width: 28px;
                height: 28px;
                margin-left: -14px;
                margin-top: -16px;
            }
            .icon {
                margin-left: 10px;
            }
        }
    }
    .button-fill {
        margin: 0 10px;
        flex-shrink: 0;
    }
    .pill-btn {
        display: flex;
        background: #fff;
        height: 34px;
        border-radius: 34px;
        box-shadow: 0px 4px 6px 0px rgba(64, 121, 184, 0.08);
        overflow: hidden;

        span {
            width: 44px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background: #fff;
            color: #333;
            padding: 0 12px;

            &.active {
                background: #3385ff;
                color: #fff;
            }

            // &:nth-of-type(1) {
            //     padding-left: 12px;
            // }
            // &:nth-of-type(2) {
            //     padding-right: 12px;
            // }
        }
    }
}
.nav-left {
    width: 25%;
    margin-left: 10px;
    position: relative;
    z-index: 2;
    .left-item {
        padding: 10px;
        text-align: center;
        font-size: 16px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 3px;
        .number {
            display: inline-block;
            font-size: 18px;
        }
        .blue {
            color: #3385ff;
        }
        .red {
            color: #fe5555;
        }
        .gray {
            color: #61677a;
        }
        .margin-r-5 {
            margin-right: 5px;
        }
    }
}
.bm-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#mapContainer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    .maker-container {
        position: absolute;
    }

    .map-area-overlay {
        position: absolute;
        top: -80px;
        right: -17px;
        text-align: center;
        .map-area-num {
            box-sizing: border-box;
            padding-top: 10px;
            color: #fff;
            width: 60px;
            height: 70px;
            background: url("../../../../assets/img/numberMonitor/map-background.png")
                no-repeat 0 0;
            background-size: 100%;
        }
        .map-area-name {
            width: 110%;
            min-width: 40px;
            font-size: 14px;
            text-align: center;
            color: #61677a;
        }
        .map-area-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 100%;
            border: 1px solid #f15a5a;
            position: relative;
            > i {
                display: inline-block;
                position: absolute;
                width: 5px;
                height: 5px;
                background-color: #f15a5a;
                border-radius: 100%;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

.no-data {
    height: 100%;
    display: flex;
    font-size: 16px;
    justify-content: center;
    align-items: center;
}
.markerWindow {
    > div {
        text-align: center;
        margin-bottom: 10px;
    }
}
</style>
